---
import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro";
import Breadcrumb from "@components/breadcrumb.vue";
import _1 from "@assets/automotiveElectronics/1.png";
import _2 from "@assets/automotiveElectronics/2.png";
import _3 from "@assets/automotiveElectronics/3.png";
import _4 from "@assets/automotiveElectronics/4.png";
import _5 from "@assets/automotiveElectronics/5.png";
import ProductEvaluationBoardSearch from '@components/productEvaluationBoardSearch.vue'

---

<Layout title="About">
  <Container>
    <Breadcrumb client:only/>
    <div class="item mb-[24px]">
      <div class="title">产品评估板</div>
      <div class="mb-[30px] text-[14px]"> 搜索或浏览可用评估板和套件库，查找特定的Einno产品配套所需的评估板信息和相关文档。</div>
      <div class="title second-title">产品评估板搜索</div>
      <div class="mb-[30px] text-[14px]">请在下方搜索框中输入所需搜索或浏览可用评估板和套件库，比如您可以通过产品型号或产品分类搜索您所需要的，查找评估特定Einno产品所需的信息和文档。如未出现评估板信息，请检查输入信息并重试。</div>
      <div class="title">为你的下一个设计寻找评估版和评估套件</div>  
      <ProductEvaluationBoardSearch  client:load/>
    </div>
   
  </Container>
</Layout>
<style lang="scss" scoped>
  .item {
    box-sizing: border-box;
    padding: 16px 14px;
    border-radius: 8px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    padding-bottom: 28px;
    .title {
      font-size: 20px;
      color: #3d3d3d;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .second-title {
      font-size: 18px;
    }
    .row {
      width: 218px;
      height: 254px;
      border: 1px solid #D8D8D8;
      padding-top: 16px;
      border-radius: 8px;
      .img-box{
        border-bottom: 1px solid #D8D8D8;
        height: 128px;
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
      }
      &:hover {
        box-shadow: 0px 1px 4px 0px #712c2f;
      }
    }
  }
</style>
